<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Syng</title>

  <script>window.$ = window.jQuery = require("../src/lib/jquery/jquery.min.js");</script>

  <script src="../src/lib/tts.js/tts.js/tts.min.js"></script>

  <script>window.Vue = require("vue");</script>

  <script>
    function initializeSearch() {
      var path = require('path');
      window.engine = require(path.join(__dirname, "../src/engine.js"));
      window.ipc = require('electron').ipcRenderer; // For communication with the Main Process
      window.dialog = require('electron').remote.dialog;
      window.DatMan = require(path.join(__dirname, '../src/databaseManager.js'));
    }

    initializeSearch();
  </script>

  <!-- Add Menu -->
  <script src="../src/menu.js" type="text/javascript"></script>

  <link rel="stylesheet" href="../style/lib/iview/iview.css" />

  <style>
    #mainWindowRow {
    	height:100vh;
    }
    .main-column {
    	height: 100vh;
    }
    .main-nav-column {
    	background-color: #464c5b;
    }
  </style>
</head>

<body>
  <div id="app">
    <Row id="mainWindowRow">
      <i-col span="3" class='main-column main-nav-column'>
        <Menu theme="dark" width="100%" active-key='2'>
          <Menu-item key="1" v-on:click='loadView("syngMenu")'>
            <center>
              <Tooltip placement='right' content='Syng'>
                <h1><b>词应</b></h1>
              </Tooltip>
            </center>
          </Menu-item>
          <Menu-item key="2" v-on:click='loadView("search")'>
            <center>
              <Tooltip placement='right' content='Search'>
                <h1><Icon type="search"></Icon></h1>
              </Tooltip>
            </center>
          </Menu-item>
          <Menu-item key="3" v-on:click='loadView("yuedu")'>
            <center>
              <Tooltip placement='right' content='Reader'>
                <h1><Icon type="ios-book"></Icon></h1>
              </Tooltip>
            </center>
          </Menu-item>
          <Menu-item key="4" v-on:click='loadView("bookmarks")'>
            <center>
              <Tooltip placement='right' content='Bookmarks'>
                <h1><Icon type="bookmark"></Icon></h1>
              </Tooltip>
            </center>
          </Menu-item>
          <Menu-item key="5" v-on:click='loadView("study")'>
            <center>
              <Tooltip placement='right' content='Study'>
                <h1><Icon type="university"></Icon></h1>
              </Tooltip>
            </center>
          </Menu-item>
          <Menu-item key="6" v-on:click='loadView("tools")'>
            <center>
              <Tooltip placement='right' content='Tools'>
                <h1><Icon type="settings"></Icon></h1>
              </Tooltip>
            </center>
          </Menu-item>
        </Menu>
      </i-col>
      <component :is='currentView'></component>
    </Row>
  </div>
  <script src="../src/syng.js"></script>
</body>

</html>
